<template>
    <div class="contact-manage-template">
        <h4 class="header">联系人信息列表</h4>
        <div class="content">
            <div class="filter-section">
                <el-button type="primary" class="btn fl" plain size="small" @click="contactCreate">新增联系人</el-button>
                <el-button type="primary" class="btn fl" plain size="small" @click="institutionsManage">机构信息</el-button>
                <el-button type="primary" class="search btn fr" plain size="mini">查询</el-button>
                <el-select v-model="selectValue" placeholder="请选择" class="select fr" size="mini" filterable clearable>
                    <el-option
                            v-for="item in selectOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-input class="search-input fr"
                          placeholder="请输入关键字"
                          prefix-icon="el-icon-search"
                          v-model="searchValue"
                          size="mini" clearable>
                </el-input>
            </div>
            <ContactTableList class="contact-table-list" ref="contactTableList"></ContactTableList>
        </div>
        <Pagination class="contact-pagination" ref="contactPagination" :currentPage="contactCurrentPage"
                    :pageSize="contactPageSize"
                    :pageSizes="contactPageSizes" :total="contactTableTotal" @sizeChangeEvent="contactSizeChange"
                    @currentChangeEvent="contactCurrentChange"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination.component"
    import ContactTableList from "@/components/ContactTableList.component"

    export default {
        name: "ContactManage",
        components: {Pagination, ContactTableList},
        data() {
            return {
                searchValue: '',
                selectValue: '',
                selectOptions: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                contactCurrentPage: 1,
                contactPageSize: 100,
                contactPageSizes: [100, 200, 300, 400],
                contactTableTotal: 400
            }
        },
        methods: {
            contactSizeChange(val) {
                val && (this.contactPageSize = val);
                console.log(`每页 ${val} 条`);
            },
            contactCurrentChange(val) {
                val && (this.contactCurrentPage = val);
                console.log(`当前页: ${val}`);
            },
            /**
             * 新增联系人
             */
            contactCreate() {
                this.$parent.curPath = 'contactCreate';
            },
            /**
             * 机构信息
             */
            institutionsManage() {
                this.$parent.curPath = 'default';
            }
        }
    }
</script>

<style lang="scss">
    .contact-manage-template {
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .header {
            text-align: center;
        }
        .content {
            .filter-section {
                border-bottom: 1px solid #ddd;
                padding-bottom: 35px;
                margin: 0 10px;
                padding-left: 5px;
                padding-right: 5px;
                .select {
                    width: 125px;
                    margin-left: 10px;
                }
                .search-input {
                    width: 150px;
                }
            }
            .contact-table-list {
                margin: 0 10px;
                padding: 0 5px;
            }
        }
        .contact-pagination {
            margin-top: 10px;
        }
    }
</style>